<template>
  <div style="overflow: hidden">
    <div class="containe" v-for="(v,i) in dataList" @click="click(v)" :key="i">

      <div class="left">
        <p class="goodName">{{v.goods_name}}</p>
        <p style="color: #FC59B5;font-size:24px;margin-top: 3vw;">￥{{v.sell_price}}</p>
        <input type="button" value="立即预定" style="margin-top: 1vw;">
      </div>
      <div class="right">
        <img :src=v.image alt="" class="goodsImg">
        <img src="../../assets/img/support.png" alt="" class="support">
      </div>
      <div class="clear"></div>
      <span class="bacLeft"></span>
      <span class="bacRight"></span>
    </div>
  </div>

</template>

<script>
  //import PullTo from 'vue-pull-to'
  export default {
    name: "goodsArea",
    props:['dataList'],
    components:{
      //PullTo
    },
    data(){
      return{
        limit_id:0,
        group_id:0,
        join_id:0,
        type:1,
        page:1,
        activity_id:0,
        platform:this.$route.query.version,
      }
    },
    methods:{
      click(v){
        var ua = window.navigator.userAgent.toLowerCase();
        if (this._globe.isAndroid) {
          if (window.android != null && typeof window.android != "undefined") {

              window.android.openGoods(this.type,v.goods_id,this.join_id,this.limit_id,this.group_id,this.activity_id);//

          }else if (ua.match(/micromessenger/i) == 'micromessenger'){
            wx.miniProgram.getEnv((res)=> {
              if (res.miniprogram) {
                var url= '../../pages/detail/main?type='+this.type+'&goods_id='+v.goods_id+'&join_id='+this.join_id+'&limit_id='+this.limit_id+'&group_id='+this.group_id+'&activity_id='+this.activity_id;
                wx.miniProgram.navigateTo({
                  url: url,
                })
              }
            })
          } else {
            this.$router.push({
              path:'detail',query:{type:this.type,goods_id:v.goods_id,join_id:this.join_id,limit_id:this.limit_id,
                group_id:this.group_id,activity_id:this.activity_id}
            })
          }
        }
        if (this._globe.isIos) {
          if (window.webkit) {
            /*if (this.platform != "1.2.2") {
              window.webkit.messageHandlers.openGoods.postMessage
              ({type:this.type,goods_id:v.goods_id,join_id:this.join_id,limit_id:this.limit_id,
                group_id:this.group_id});//
            }else{*/
              window.webkit.messageHandlers.openGoods.postMessage
              ({type:this.type,goods_id:v.goods_id,join_id:this.join_id,limit_id:this.limit_id,
                group_id:this.group_id,activity_id:this.activity_id});//
            /*}*/

            /* window.webkit.messageHandlers.callAppHelp.postMessage(num)*/
          }else if (ua.match(/micromessenger/i) == 'micromessenger'){
            wx.miniProgram.getEnv((res)=> {
              if (res.miniprogram) {
                var url= '../../pages/detail/main?type='+this.type+'&goods_id='+v.goods_id+'&join_id='+this.join_id+'&limit_id='+this.limit_id+'&group_id='+this.group_id+'&activity_id='+this.activity_id;
                wx.miniProgram.navigateTo({
                  url: url,
                })
              }
            })
          }else {
            this.$router.push({
              path:'detail',query:{type:this.type,goods_id:v.goods_id,join_id:this.join_id,limit_id:this.limit_id,
                group_id:this.group_id,activity_id:this.activity_id}
            })
          }
        }
      }
    },
    mounted(){
      window.openGoods= this.click();
      window.webkit.openGoods= this.click();
    }
  }
</script>

<style scoped lang="scss">
  .containe:nth-child(odd) .left{
    float: left !important;
  }
  .containe:nth-child(even) .left{
    float: right !important;
    position: relative;
    right: 2vw;
  }
  .containe:nth-child(even) .right{
      float: left !important;
    left: -36vw;
    }
  .containe:nth-child(odd) .right{
    float: right !important;
    position: relative;
    right: 2vw;
  }

  .containe{
    width:100vw;
    height:auto;
    background: #53caf2;
    position: relative;
    .bacLeft{
      width: 90vw;
      display: inline-block;
      position: absolute;
      height: 89vw;
      background: url("../../assets/img/backgroundLeft.png");
      background-size:100% 100%;
      left: 0px;
      opacity: .5;
      top: 0vw;
      z-index: 111;
    }
    .bacRight{
      width: 90vw;
      display: inline-block;
      position: absolute;
      height: 89vw;
      background: url("../../assets/img/backgroundRight.png");
      background-size:100% 100%;
      right: 0px;
      opacity: .5;
      top: 0vw;
      z-index: 111;
    }
    .left{
      float: left;
      width: 41vw;
      height: auto;
      margin-left: 4.33vw;
      position: relative;
      z-index: 112;
      .goodName{
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp:3;
        overflow: hidden;
        text-overflow: ellipsis;
        height: 18vw;
        line-height: 6vw;
      }
      p{
        color: #fff;
        font-size: 16px;
        text-align: left;
      }
      input{
        background: #FFABFE;
        color:#fff;
        text-align: center;
        line-height: 5vw;
        height: 6.67vw;
        width: 26.67vw;
        float: left;
      }
    }
    .right{
      float: right;
      margin-right: 4vw;
      position: relative;
      z-index: 112;
      .goodsImg{
        right: -44vw;
        top: -37vw;
        width: 37.33vw;
        height: 37.33vw;
        border: 2px solid #FFABFE;
        -webkit-border-radius: 1vw;
        -moz-border-radius: 1vw;
        border-radius: 1vw;
        position: relative;
        z-index: 2;
      }
      .support{
        width:49.07vw;
        height:34.93vw;
        background:url("../../assets/img/support.png");
        -webkit-background-size: 100% 100%;
        background-size: 100% 100%;
        position: relative;
        margin-top: -17vw;
        margin-bottom: 10vw;
        top: -8vw;
      }
    }

    .second{
      .right{
        float: right;
        width: 41vw;
        height: auto;
        margin-left: 4.33vw;
        margin-right: 1vw;
        p{
          color: #fff;
          font-size: 16px;
          text-align: left;
        }
        input{
          background: #FFABFE;
          color:#fff;
          text-align: center;
          line-height: 5vw;
          height: 6.67vw;
          width: 26.67vw;
          float: left;
        }
      }
      .left{
        float: left;
        margin-right: 4vw;
        .goodsImg{
          width: 37.33vw;
          height: 37.33vw;
          border: 2px solid #FFABFE;
          -webkit-border-radius: 1vw;
          -moz-border-radius: 1vw;
          border-radius: 1vw;
          position: relative;
          z-index: 2;
        }
        .support{
          width:49.07vw;
          height:34.93vw;
          background:url("../../assets/img/support.png");
          -webkit-background-size: 100% 100%;
          background-size: 100% 100%;
          position: relative;
          margin-top: -16vw;
          margin-bottom: 10vw;
        }

      }
    }
  }
</style>
